<template>
  <div class="all-subject">
    <div class="search">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <el-cascader
            :change-on-select="true"
            :options="courseCategorys"
            v-model="listQuery.courseCategory"
            @change="handleFilter"
          />
          <el-input v-model="listQuery.title" style="width:220px;" placeholder="课程名称" @keyup.enter.native="handleFilter"/>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table
        ref="allsubjectTable"
        :data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="名称" min-width="10" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handlePush(scope)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="教师" min-width="10" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUserDialog(scope)">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="planNum" label="教学计划数" min-width="10" align="center"/>
        <el-table-column prop="price" label="当前原价" min-width="10" align="center"/>
        <el-table-column prop="selectStatus" label="状态" min-width="10" align="center">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.selectStatus }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <user-dialog
        :visiabledialog="userdialog"
        :dialog-data="dialogData"
        @changeVisiable="userdialog = false"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import UserDialog from '@/components/Dialog'
import { getAllCourseList } from '@/api/operate/discount' // 接口
import { getTenantId } from '@/utils/auth'
import { getUserDetail } from '@/api/operate/userDetail' // 数据接口
import { getCategoryList } from '@/api/subject/category'
export default {
  name: 'Allsubject',
  components: {
    UserDialog,
    Pagination
  },
  props: {
    selectData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      total: 1,
      currentpage: 1,
      pagesize: 10,
      listQuery: {
        courseCategory: [],
        title: ''
      },
      courseCategorys: [
        {
          value: '',
          label: '课程分类'
        }
      ],
      tableData: [],
      listFilter: [],
      userdialog: false,
      dialogData: {}
    }
  },
  computed: {
    secondData() {
      return this.selectData
    }
  },
  watch: {
    secondData(val) {
      this.toggleSelection(val)
    }
  },
  created() {
    this.getData();
    this.getCategoryList()
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        console.log('1', this.tableData);
        rows.forEach(row => {
          this.tableData.map(item => {
            if (row.id === item.id) {
              this.$refs.allsubjectTable.toggleRowSelection(item)
            }
          })
        });
        console.log('2', this.tableData)
      } else {
        this.$refs.allsubjectTable.clearSelection()
      }
    },
    handleFilter() {
      this.tableData = this.listFilter.filter(item => {
        if (this.listQuery.courseCategory[0] && item.categoryName !== this.listQuery.courseCategory[this.listQuery.courseCategory.length - 1]) return false;
        if (this.listQuery.title && item.title.toLocaleLowerCase().indexOf(this.listQuery.title.toLocaleLowerCase()) === -1) return false;
        return true
      });
      this.total = this.tableData.length
    },
    getData() {
      getAllCourseList(getTenantId()).then(res => {
        res.data.items.map(item => {
          item.selectStatus = '未选择'
        });
        this.tableData = res.data.items;
        this.listFilter = res.data.items;
        this.total = this.tableData.length
      })
    },
    handleSizeChange(val) {
      this.currentpage = 1;
      this.pagesize = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleSelectChange(val, row) {
      // 仅操作当前选中行
      if (row.selectStatus === '未选择') {
        row.selectStatus = '已选择'
      } else {
        row.selectStatus = '未选择'
      }
    },
    handleSelectionChange(val) {
      this.$emit('selectNumber', val, val.length)
    },
    handlePush(scope) {
      // 跳转到门户网站
      console.log(scope.row)
    },
    discount(scope) {
      // 个人信息dialog
      getUserDetail(scope.row.userId).then(response => {
        this.dialogData = response.data.item
      });
      this.userdialog = true
    },
    getCategoryList() {
      getCategoryList('course', getTenantId(),'0').then(response => {
        response.data.items.forEach(item => {
          item.label = item.name;
          item.value = item.name;
          if (item.parentId === 0) {
            item.children = [];
            this.courseCategorys.push(item)
          }
        });
        response.data.items.forEach(item => {
          if (item.parentId !== 0) {
            item.label = item.name;
            item.value = item.name;
            this.courseCategorys.forEach(category => {
              if (item.parentId === category.id) {
                category.children.push(item)
              }
            })
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.all-subject {
  .search {
    margin-bottom: 21px;
  }
}
</style>
